<!DOCTYPE html>
<html>
<head>
  <title>iviewDemo</title>
  #parse("sys/header.html")
</head>
<body>
<div id="rrapp" v-cloak>
  <div id="body">
    <i-button type="info" @click="api">IVIEW_API</i-button>
    <i-switch v-model="switch1" @on-change="change"></i-switch>
    <Row>
      <i-col span="12">
        <Date-picker type="date" v-model="data1" placeholder="选择日期"
                     style="width: 200px"></Date-picker>
        {{data1}}
      </i-col>
      <i-col span="12">
        <Date-picker type="daterange" placement="bottom-end" placeholder="选择日期区间"
                     style="width: 200px"></Date-picker>
      </i-col>
    </Row>
    <Tabs value="name1">
      <Tab-pane label="buttons" name="name0">
        <i-col span="24">
          <i-button>Default</i-button>
          <i-button type="primary">Primary</i-button>
          <i-button type="ghost">Ghost</i-button>
          <i-button type="dashed">Dashed</i-button>
          <i-button type="text">Text</i-button>
          <i-button type="info">信息按钮</i-button>
          <i-button type="success">成功按钮</i-button>
          <i-button type="warning">警告按钮</i-button>
          <i-button type="error">错误按钮</i-button>
        </i-col>
        <i-col span="24">
          <i-button type="primary" shape="circle" size="large">Large</i-button>
          <i-button type="primary" shape="circle">Default</i-button>
          <i-button type="primary" shape="circle" size="small">Small</i-button>
          <i-button type="ghost" icon="social-facebook"></i-button>
          <i-button type="ghost" icon="social-twitter"></i-button>
          <i-button type="success" @click="show">Click me!</i-button>
          <Modal v-model="visible" title="Welcome">欢迎使用 iView</Modal>
        </i-col>
        </i-col>
        <i-col span="24">
          <i-button type="success" shape="circle" icon="ios-search"></i-button>
          <i-button type="success" icon="ios-search">搜索</i-button>
          <i-button type="success" shape="circle" icon="ios-search">搜索</i-button>
          <i-button type="success" shape="circle">圆角按钮</i-button>
          <i-button type="ghost" shape="circle" icon="ios-search"></i-button>
          <i-button type="ghost" icon="ios-search">搜索</i-button>
          <i-button type="ghost" shape="circle" icon="ios-search">搜索</i-button>
          <i-button type="ghost" shape="circle">圆角按钮</i-button>
          <i-button type="primary">Primary</i-button>
          <i-button type="primary" disabled>Primary(Disabled)</i-button>
        </i-col>
        <i-col span="24">
          <i-button type="primary" loading>Loading...</i-button>
          <i-button type="primary" :loading="loading" @click="toLoading">
            <span v-if="!loading">Click me!</span>
            <span v-else>Loading...</span>
          </i-button>
          <i-button type="primary" :loading="loading2" icon="checkmark-round" @click="toLoading2">
            <span v-if="!loading2">Click me!</span>
            <span v-else>Loading...</span>
          </i-button>
        </i-col>
        <i-col span="6">
          <i-button type="success" long>确认提交</i-button>
        </i-col>
        <i-col span="6">
          <i-button type="error" long>确认删除</i-button>
        </i-col>
      </Tab-pane>
      <Tab-pane label="form表单" name="name1">
        <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
          <Form-item label="姓名" prop="name">
            <i-input v-model="formValidate.name" placeholder="请输入姓名"/>
          </Form-item>
          <Form-item label="邮箱" prop="mail">
            <i-input v-model="formValidate.mail" placeholder="请输入邮箱"/>
          </Form-item>
          <Form-item label="城市" prop="city">
            <i-select v-model="formValidate.city" placeholder="请选择所在地">
              <i-option value="beijing">北京市</i-option>
              <i-option value="shanghai">上海市</i-option>
              <i-option value="shenzhen">深圳市</i-option>
            </i-select>
          </Form-item>
          <Form-item label="选择日期">
            <Row>
              <i-col span="5">
                <Form-item prop="date">
                  <Date-picker type="date" placeholder="选择日期"
                               v-model="formValidate.date"></Date-picker>
                </Form-item>
              </i-col>
              <i-col span="1" style="text-align: center">-</i-col>
              <i-col span="5">
                <Form-item prop="time">
                  <Time-picker type="time" placeholder="选择时间"
                               v-model="formValidate.time"></Time-picker>
                </Form-item>
              </i-col>
            </Row>
          </Form-item>
          <Form-item label="性别" prop="gender">
            <Radio-group v-model="formValidate.gender">
              <Radio label="male">男</Radio>
              <Radio label="female">女</Radio>
            </Radio-group>
          </Form-item>
          <Form-item label="爱好" prop="interest">
            <Checkbox-group v-model="formValidate.interest">
              <Checkbox label="吃饭"></Checkbox>
              <Checkbox label="睡觉"></Checkbox>
              <Checkbox label="跑步"></Checkbox>
              <Checkbox label="看电影"></Checkbox>
            </Checkbox-group>
          </Form-item>
          <Form-item label="介绍" prop="desc">
            <i-input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                     placeholder="请输入..."/>
          </Form-item>
          <Form-item>
            <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
            <i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置
            </i-button>
          </Form-item>
        </i-form>
      </Tab-pane>
      <Tab-pane label="时间轴" name="name2">
        <Timeline>
          <Timeline-item>
            <p class="time">1976年</p>
            <p class="content">Apple I 问世</p>
          </Timeline-item>
          <Timeline-item>
            <p class="time">1984年</p>
            <p class="content">发布 Macintosh</p>
          </Timeline-item>
          <Timeline-item>
            <p class="time">2007年</p>
            <p class="content">发布 iPhone</p>
          </Timeline-item>
          <Timeline-item>
            <p class="time">2010年</p>
            <p class="content">发布 iPad</p>
          </Timeline-item>
          <Timeline-item>
            <p class="time">2011年10月5日</p>
            <p class="content">史蒂夫·乔布斯去世</p>
          </Timeline-item>
        </Timeline>
      </Tab-pane>
      <Tab-pane label="slider" name="name3">
        <Slider v-model="value1"></Slider>
        <Slider v-model="value2" range></Slider>
        <Slider v-model="value3" range disabled></Slider>
        <Slider v-model="value4" :step="10"></Slider>
        <Slider v-model="value5" :step="10" range></Slider>
        <Slider v-model="value6" :step="10" show-stops></Slider>
        <Slider v-model="value7" :step="10" show-stops range></Slider>
        <Slider v-model="value8" show-input></Slider>
        <Slider v-model="value9" :tip-format="format"></Slider>
        <Slider v-model="value10" :tip-format="hideFormat"></Slider>
      </Tab-pane>
      <Tab-pane label="Circle 进度环" name="name4">
        <i-circle
            :size="250"
            :trail-width="4"
            :stroke-width="5"
            :percent="75"
            stroke-linecap="square"
            stroke-color="#43a3fb">
          <div class="demo-i-circle-custom">
            <h1>42,001,776</h1>
            <p>消费人群规模</p>
            <span>
                            总占人数
                            <i>75%</i>
                        </span>
          </div>
        </i-circle>
      </Tab-pane>
      <Tab-pane label="级联选择" name="name5">
        <Cascader :data="data" v-model="value11"></Cascader>
      </Tab-pane>
      <Tab-pane label="Select" name="name6">
        <i-select v-model="model2" size="small" style="width:100px">
          <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label
            }}
          </i-option>
        </i-select>
        <i-select v-model="model3" style="width:100px">
          <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label
            }}
          </i-option>
        </i-select>
        <i-select v-model="model4" size="large" style="width:100px">
          <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label
            }}
          </i-option>
        </i-select>
      </Tab-pane>
    </Tabs>
  </div>
</div>

<script src="${rc.contextPath}/js/test/iviewDemo.js?_${date.systemTime}"></script>
</body>
</html>